<template>
  <div class="n-disk">
    <div class="inner">
      <a href="javascript:;" class="pre s-bg" @click="prev"></a>
      <div class="roll">
        <el-carousel
          height="150px"
          class="carousel"
          ref="el"
          indicator-position="none"
          arrow="never"
          :autoplay="false"
        >
          <el-carousel-item v-for="item in newAlbum" :key="item[0].id">
            <ul>
              <li v-for="data in item" :key="data.id">
                <div class="u-cover-alb1">
                  <img v-lazy="`${data.picUrl}`" />
                  <a href="javascript:;" class="mask1 msk"></a>
                </div>
                <p class="overtext" :title="data.name">
                  <a href="javascript:;" class="unline">{{ data.name }}</a>
                </p>
                <p
                  class="overtext"
                  :title="meageTitle(data.artists)"
                  v-html="meageElement(data.artists)"
                ></p>
              </li>
            </ul>
          </el-carousel-item>
        </el-carousel>
      </div>
      <a href="javascript:;" class="nxt s-bg" @click="next"></a>
    </div>
  </div>
</template>

<script>
import { nextTick, ref, shallowRef } from "vue";
import { getNewDiscFn } from "@/api/index.js";
import { meageTitle, meageElement } from "@/baseFnMixin/mergeName/mergeNameMixin.js";
export default {
  name: "DisShelves",
  setup() {
    let el = ref(null);
    let newAlbum = shallowRef([]);

    function prev() {
      el.value.prev();
    }
    function next() {
      el.value.next();
    }

    getNewDiscFn().then((response) => {
      let arr = [];

      arr.push(response.data.albums.slice(0, 5));
      arr.push(response.data.albums.slice(5, 10));
      arr.push(response.data.albums.slice(0, 5));
      arr.push(response.data.albums.slice(5, 10));
      newAlbum.value = arr;

      nextTick(() => {
        el.value.prev();
      });
    });

    return {
      el,
      prev,
      next,
      newAlbum,
      meageTitle,
      meageElement,
    };
  },
};
</script>

<style scoped lang="less">
.carousel {
  margin-top: 20px;
}
.n-disk {
  position: relative;
  zoom: 1;
  height: 186px;
  margin: 20px 0 37px;
  border: 1px solid #d3d3d3;
  .inner {
    height: 184px;
    padding-left: 16px;
    background: #f5f5f5;
    border: 1px solid #fff;
  }
  .roll {
    float: left;
    position: relative;
    width: 645px;
    height: 180px;
    overflow: hidden;
  }

  li {
    float: left;
    display: inline;
    width: 118px;
    height: 150px;
    margin-left: 11px;
    background: url(../../../common/images/index.png) no-repeat -260px 100px;
  }
  p {
    width: 90%;
    line-height: 18px;
  }
  .pre {
    position: absolute;
    left: 4px;
    top: 71px;
    width: 17px;
    height: 17px;
    background-position: -260px -75px;
  }
  .nxt {
    position: absolute;
    top: 71px;
    width: 17px;
    height: 17px;
    background-position: -300px -75px;
  }
}
.u-cover-alb1 {
  position: relative;
  display: block;
  margin-bottom: 7px;
  width: 100px;
  height: 100px;
  img {
    width: 100%;
    height: 100%;
  }
  .msk {
    position: absolute;
    top: 0;
    left: 0;
    width: 118px;
    height: 100px;
    background-position: 0 -570px;
  }
}
</style>
